<!DOCTYPE html>
<html lang=en>
    <head>
	<meta charset=utf-8>
	<title>Peers | Fediverse-FE</title>	
	<link rel="shortcut icon" type="image/x-icon" href="//peers.community/favicon.ico" />
	<style>
	 body {
	     margin: 0;
	     padding: 0;
	     font-family:sans-serif;
	     line-height:1.4;
	     color:#cccccc;
	     background:#000000;
	 }

	 nav.fed-menu {
	     position: fixed;
	     width: 100%;
	     height: 50px;
	     padding: 0;
	     margin: 0;
	     background-color: #6666ff;
	     color: #ffffff;
	 }
	 nav.fed-menu ul {
	     margin: 0;
	     list-style-type: none;
	 }
	 nav.fed-menu ul li {
	     display: inline;
	     padding: 0 20px 0 0;
	 }

	 div.fed-main {
	     width: 93.6%;
	     max-width: 1024px;
	     margin: 0 auto 1rem auto;
	     padding: 60px 3.2% 0 3.2%;
	 }
	 div.fed-main .fed-main-left {
	 }
	 div.fed-main .fed-main-right {
	 }
	 div.fed-main section {
	     padding: 0 4px;
	     border: 1px solid black;
	     border-radius: 4px;
	     background-color: #cccccc;
	     color: black;
	 }
	 div.fed-main section.timeline article {
	 }
	 div.fed-main section.timeline article img {
	     width: 48px;
	 }

	 a {
	     color:#808000;
	     text-decoration:none;
	     font-weight: bold;
	 }
	 a:hover, a:active, a:visited { text-decoration: underline; }
	 a:active { color:#ff0000; }

	 h1, h2, h3, h4, h5, h6 {
	     color:#008800;
	     font:x-large monospace;
	     font-weight: bold;
	 }

	 pre {
	     white-space: normal;
	 }
	 table {
	     background-color: #222222;
	     color: #cccccc;
	 }
	 tr:nth-child(even) {
	     background-color: #cccccc;
	     color: #222222;
	 }

	 /* 
	    NOTE: Adding in this media query until we have a better way to
	    manage pre and table elements in mfws.
	  */
	 @media only screen and (min-width: 640px) {
	     div.fed-main {
		 display: flex;
		 min-width: 600px;
		 width: 80%;
		 padding: 60px 10px 0 10px;
	     }
	     div.fed-main .fed-main-left {
		 flex: 1 1 345px;
	     }
	     div.fed-main .fed-main-left .bounds {
		 overflow: hidden;
		 width: 345px;
		 position: fixed;
	     }
	     div.fed-main .fed-main-left .bounds .scroller {
		 height: 86vh;
		 width: 355px;
		 padding-right: 50px;
		 overflow-x: hidden;
		 overflow-y: scroll;
	     }
	     div.fed-main .fed-main-right {
		 flex: 1 1 60%;
	     }
	     pre {
		 white-space: pre;
	     }
	 }
	</style>
    </head>
    <body>
	<nav class="fed-menu">
	    <ul>
		<li>Title</li>
		<li>Logo</li>
		<li>Widgets</li>
	    </ul>
	</nav>
	<div class="fed-main">
	    <div class="fed-main-left">
		<div class="bounds">
		    <div class="scroller">
			<section>
			    <h1>Login</h1>
			    <p>Do some passwordless auth...</p>
			    <p>Funny if one could OpenID against the same backend.</p>
			</section>
			<section>
			    <h1>Links</h1>
			    <ul>
				<li><a href="">Public</a></li>
				<li><a href="">Network</a></li>
				<li><a href="">Popular</a></li>
			    </ul>
			</section>
			<section>
			    <h1>Welcome to the Fediverse</h1>
			    <p>Details...</p>
			    <!-- NOTE: Clean URIs but adding the document makes it work without a webserver. -->
			    <p>Announcements... and
				<a href="../pleroma-fe-view/index.html">pleroma-fe-view</a>,
				<a href="../qvitter-view/index.html">qvitter-view</a>,
				<a href="../user-view/index.html">user-view</a></p>
			</section>			
		    </div>
		</div>
	    </div>
	    <div class="fed-main-right">
		<section>
		    <h1>User</h1>
		    <strong>@user</strong>
		    <p>TODO: Break down and critique the Qvitter layout.</p>
		    <ul>
			<li>Following</li>
			<li>Followers</li>
		    </ul>
		</section>
		<section class="timeline">
		    <h1>Timeline</h1>
		    <a href="./">Refresh</a>
		    <article>
			<img src="https://peers.community/logo.svg" />
			<strong>name</strong>
			<span>@user/link</span>
			<p>message so much to say so much to say in this really important message to everyone.</p>
			<ul>
			    <li>star</li>
			    <li>repeat</li>
			    <li>reply</li>
			    <li>timestamp</li>
			    <li>notice link</li>
			    <li>conversation link</li>
			</ul>
		    </article>
		    <article>
			<img src="https://peers.community/logo.svg" />
			<strong>name</strong>
			<span>@user/link</span>
			<p>message so much to say so much to say in this really important message to everyone.</p>
			<ul>
			    <li>star</li>
			    <li>repeat</li>
			    <li>reply</li>
			    <li>timestamp</li>
			    <li>notice link</li>
			    <li>conversation link</li>
			</ul>
		    </article>
		    <article>
			<img src="https://peers.community/logo.svg" />
			<strong>name</strong>
			<span>@user/link</span>
			<p>message so much to say so much to say in this really important message to everyone.</p>
			<ul>
			    <li>star</li>
			    <li>repeat</li>
			    <li>reply</li>
			    <li>timestamp</li>
			    <li>notice link</li>
			    <li>conversation link</li>
			</ul>
		    </article>
		    <article>
			<img src="https://peers.community/logo.svg" />
			<strong>name</strong>
			<span>@user/link</span>
			<p>message so much to say so much to say in this really important message to everyone.</p>
			<ul>
			    <li>star</li>
			    <li>repeat</li>
			    <li>reply</li>
			    <li>timestamp</li>
			    <li>notice link</li>
			    <li>conversation link</li>
			</ul>
		    </article>
		    <article>
			<img src="https://peers.community/logo.svg" />
			<strong>name</strong>
			<span>@user/link</span>
			<p>message so much to say so much to say in this really important message to everyone.</p>
			<ul>
			    <li>star</li>
			    <li>repeat</li>
			    <li>reply</li>
			    <li>timestamp</li>
			    <li>notice link</li>
			    <li>conversation link</li>
			</ul>
		    </article>
		    <article>
			<img src="https://peers.community/logo.svg" />
			<strong>name</strong>
			<span>@user/link</span>
			<p>message so much to say so much to say in this really important message to everyone.</p>
			<ul>
			    <li>star</li>
			    <li>repeat</li>
			    <li>reply</li>
			    <li>timestamp</li>
			    <li>notice link</li>
			    <li>conversation link</li>
			</ul>
		    </article>
		    <!-- print up to 9 or 19 more -->
		</section>
	    </div>
	</div>
    </body>
</html>
